<template>
  <item-title title="基本信息" />

  <el-form
    :inline="true"
    label-position="right"
    label-width="150px"
    class="form-detail"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >
      <el-col :span="8">
        <el-form-item label="通用名：">
          {{ datas.planInfo?.productPopularName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="商品名：">
          {{ datas.planInfo?.productName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="包装规格：">
          {{ datas.planInfo?.packSpecs }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="生产厂家：">
          {{ datas.planInfo?.producer }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="交易价：">
          {{ datas.planInfo?.tradePrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="招商规划名称：">
          {{ datas.planInfo?.planName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划结束日期：">
          {{ dateFormat('yyyy-mm-dd', datas.planInfo.expireTime) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="市场准入信息：">
          <my-tooltip
            v-if="datas.planInfo?.chanceId"
            :content="datas.planInfo?.chanceName"
            @click="toChance"
          />
          <span v-else>无</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建人：">
          {{ datas.planInfo?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="发布时间：">
          <span v-if="datas.planInfo?.putTime">{{ dateFormat('yyyy-mm-dd HH:MM',datas.planInfo?.putTime) }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

    </el-row>

  </el-form>

  <item-title
    style="margin-top: 20px"
    title="推荐商销客户"
  />
  <sellerView :datas="datas" />

  <!-- 准入详情 -->
  <detail-drawer
    ref="chanceDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>关联市场准入 - {{ datas?.planInfo?.chanceName }}</span>
    </template>
    <template #contents>

      <chance-info :id="datas?.planInfo.chanceId" />

    </template>
  </detail-drawer>

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'BusinessDetail',
  components: {
    sellerView: defineAsyncComponent(() => import('./sellerView.vue')),
    chanceInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/business/chanceInfo.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
  },
  setup(props, {}) {
    var data = reactive({
      chanceDrawer: null,
    })

    const toChance = () => {
      data.chanceDrawer.open()
    }

    return {
      ...toRefs(data),
      toChance,
    }
  },
})
</script>

<style scoped>
</style>
